<template>
    <div class="invite">
        <!-- <div class="head_portrait">
            <div class="img">
                <img :src="userInfo.userPhoto | hasdomain">
            </div>
        </div>
        <div class="invite_code">
            <p class="guide f24">长按识别 二维码，立即给您答案</p>
            <p class="guide f24">领取<span>300元</span>大礼包</p>
            <div class="invite_code_img">
                <img :src="imgUrl">
            </div>
            <p class="source">来自微信公众号：一点高人</p>
        </div> -->
        <swiper v-if="imgUrl.length" class="invite_banner" :options="mySwiperOption" ref="mySwiper">
            <swiper-slide v-for="(item, key) in imgUrl" :key="key">
                <img :src="item">
            </swiper-slide>
            <div class="swiper-button-prev swiper-button-black f32" slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-black f32" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
    import wx from 'weixin-js-sdk'
    export default {
        name: 'invite',
        data() {
            return {
                imgUrl: [],
                userInfo: '',
                imgInd: 0,
                mySwiperOption:{
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                     on:{
                        slideChangeTransitionEnd: () => {
                            let swiper = this.$refs.mySwiper.swiper;
                            this.imgInd = swiper.activeIndex
                            this.wxready()
                        }
                    }
                },
                data: {}
            }
        },
        methods: {
            getFriendQrcode() {
                let params = {
                    userType: 'user',
                    id: this.$store.state.userId
                }
                this.$http.fetchGet('getFriendQrcode', params).then(res => {
                    if(res.code == 200) {
                        this.imgUrl = res.data.qrcodeUrl
                        
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            wxshare(url) {
                this.$http.fetchGet('getJsSignature', {url: 'https://c.yidiangaoren.com/web/'}).then(res => {
                    this.data = res;
                    wx.config({
                        debug: false, // 开启调试模式， 开发是可以开启
                        appId: this.data.appid, // 必填，公众号的唯一标识
                        timestamp: this.data.timestamp, // 必填， 生成签名的时间戳
                        nonceStr: this.data.noncestr, // 必填， 生成签名的随机串
                        signature: this.data.signature, // 必填， 签名
                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage',], //填写用到的方法
                    })
                })
            },
            wxready() {
                wx.ready(() => {
                    wx.onMenuShareAppMessage({
                        title: '一点高人', // 分享标题
                        desc: '快点加入我们吧', // 分享描述
                        link:  this.imgUrl[this.imgInd], //'http://demo.bjyoumeng.cn/Upload/image/ewm/ewm25852.jpg', // 分享链接 默认以当前链接
                        imgUrl: this.imgUrl[this.imgInd], // 分享图标
                        type: 'link',
                        dataUrl: '',
                        success: () => {
                            alert('分享成功')
                        },
                        cancel: () => {
                            alert('取消分享')
                        }
                    });
                    wx.onMenuShareTimeline({
                        title: '一点高人',
                        link: this.imgUrl[this.imgInd],
                        imgUrl: this.imgUrl[this.imgInd],
                        success: () => {
                            alert('分享成功')
                        },
                        cancel: () => {
                            alert('取消分享')
                        }
                    })
                })
            }
        },
        mounted() {
            this.getFriendQrcode()
            this.wxshare()
            this.wxready()
        }
    }
</script>

<style lang="less" scoped>
    .invite{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        // background: url('../../assets/my/tuijianBg.png');
        background-size: 100%;
        display: flex;
        .head_portrait{
            .w(460);
            .h(460);
            // background: url('../../assets/my/guang.png') no-repeat;
            background-size: 100%;
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            .img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(160);
                .h(160);
                overflow: hidden;
                border-radius: 50%;
                img{
                    width: 100%;
                    height: auto;
                }
            }
        }
        .invite_code{
            position: absolute;
            top: 68%;
            left: 50%;
            transform: translate(-50%, -50%);
            .w(460);
            .h(460);
            background: #fff;
            border-radius: 5px;
            .pt(20);
            .invite_code_img{
                .w(200);
                .h(200);
                position: absolute;
                top: 55%;
                left: 50%;
                transform: translate(-50%, -50%);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .guide{
                .lh(60);
                text-align: center;
                span{
                    color: #EE7A56;
                    transform:scale(2);
                    font: 160%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
                }
            }
            .source{
                width: 100%;
                text-align: center;
                color: #999;
                position: absolute;
                bottom: 15px;
            }
        }
        .invite_img{
            width: 100%;
            flex: 1;
            img{
                width: 100%;
                height: auto;
            }
        }
        .swiper-wrapper{
            .swiper-slide{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content:center;
                align-items:Center;
                img{
                    width: 100%;
                }
            }
        }
        .swiper-button-prev, .swiper-button-next{
            transform: scale(.5);
        }
        .invite_banner{
            .h(1300);
        }
    }
</style>
